<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <div class="router-content">
        <a ui-sref="R1">R1</a><br>
        <a ui-sref="R2">R2</a>
        <div ui-view></div>
      </div>
    </div>
    <script>
      var app = angular.module("myApp", ["ui.router"]);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
      });
      app.controller("commonCtrl",function ($scope) {
          $scope.name = "commonCtrl"
          $scope.sayHello = function(){
              console.log("hello");
          }
          $scope.sayWorld = function(){
              console.log("world");
          }
      })
      app.config(function($stateProvider){
          $stateProvider.state("R1",{
            url:"R1",
            template:`
            <div>
                <h1>Hello</h1>
                <h2>{{name}}</h2>
                <button ng-click="sayHello()">btn1</button>
                <button ng-click="sayWorld()">btn2</button>
            </div>
            `,
            controller:function($scope,$controller){
                $controller("commonCtrl",{
                    $scope:$scope
                })
                $scope.sayWorld = function () {
                    console.log("R1 world");
                }
            }
          });
          $stateProvider.state("R2",{
            url:"R2",
            template:`
            <div>
                <h1>Hello</h1>
                <h2>{{name}}</h2>
                <button ng-click="sayHello()">btn1</button>
                <button ng-click="sayWorld()">btn2</button>
            </div>
            `,
            controller:function($scope,$controller){
                $controller("commonCtrl",{
                    $scope:$scope
                })
                $scope.name="R2"
                $scope.sayHello = function () {
                    console.log("R2 hello");
                }
            }
          })
      })
    </script>
  </body>
</html>
